<template>
  <div class="allPage">
     <!-- 标题&搜索部分   -->
    <div style="width: 100%">
      <div style="display:flex;margin-top: 16px">      <!-- 使其不换行-->
        <!--        竖线-->
        <div style="background-color:rgb(245,183,12);width: 3px;height:20px;"> </div>
        <span style="padding-left:6px;letter-spacing:3px; background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
             -webkit-background-clip:text;  -webkit-text-fill-color:transparent;  ">{{ institution.checkName }}</span>
      </div>

      <el-form :inline="true" :model="searchInline" class="demo-form-inline" style="margin-top: 16px;height:56px">
        <el-form-item>
          <el-input v-model="searchInline.provices" placeholder="省份"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchInline.cities" placeholder="城市"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchInline.years" placeholder="年份"></el-input>
        </el-form-item>
        <el-form-item style="float:right;padding-right: 10px">
          <el-button type="text" @click=" queryServerUnit()"><span style="color:rgb(104,104,104)">筛选</span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div><!--   表格和标题部分   -->
      <div style="width: 100%;background-color: #4472C4;height: 30px;padding-top:8px; font-size: 20px;color:yellow; text-align: center">
        <strong>储罐服务单位共计{{ institution.sydwCount }}家</strong><!--标题 -->
      </div>
      <!--表格 -->
      <el-table :data="serverUnitTable" style="width: 100%" @expand-change="companyOpen" :row-key="getRowKeys"
                :expand-row-keys="expands"
         >
         <el-table-column label="序号" prop="id" type="expand">
           <template slot-scope="scope">
             <el-table :data="tankInfoTable" style="width: 100%;" stripe
                       :cell-style="cellStyle" :header-cell-style="{ background: '#2F5597', color:'white'}" >
               <el-table-column label="序号" prop="id"></el-table-column>
               <el-table-column label="设备编号" prop="f003" ></el-table-column>
               <el-table-column label="容积（m3）" prop="f006"></el-table-column>
               <el-table-column label="最近检验日期" prop="f025" ></el-table-column>
               <el-table-column label="下次检验日期" prop="nextCheckDate" ></el-table-column>
               <el-table-column label="检验报告" prop="f035" ></el-table-column>
               <el-table-column label="建议" prop="f034" width="400"></el-table-column>
             </el-table>
           </template>
         </el-table-column>
         <el-table-column label="使用单位" prop="sydw"></el-table-column>
         <el-table-column label="储罐总量" prop="tankCount"></el-table-column>
         <el-table-column label="100000m3及以上" prop="hunThoundsCumec"></el-table-column>
         <el-table-column label="[10000,100000)m3" prop="tenThoundsCumec"></el-table-column>
         <el-table-column label="[1000,10000)m3" prop="thoundsCumec"></el-table-column>
         <el-table-column label="1000m3以下" prop="lessThoundCumec"></el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="container">
        <el-pagination
          background
          @size-change="checkUnitListTablePageSizeChange"
          @current-change="checkUnitListTablePageChange"
          :current-page="CheckUnitListCurrentPage"
          :page-sizes="[10, 15, 20, 40]"
          :page-size="CheckUnitListArgs.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="CheckUnitListTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {searchCheckUnitList,CheckUnitListSearchArgs} from "../../../../../api/chuguan/data-service";

export default {
  name: "InstitutionDetail",
  data(){
    return{
      searchInline:{provices:"", cities:"",years:""},
      allData:[],
      expands:[],
      serverUnitTable:[],
      tag:0,
      _serverUnitTable:[],
      tankInfoTable:[],
      _tankInfoTable:[],
      CheckUnitListTotal: 3,
      CheckUnitListCurrentPage: 1,
      CheckUnitListArgs: new CheckUnitListSearchArgs(),
      checkName:"" //机构名称，会在watch中获取
    }
  },
  props: { //外部变量
    institution: {
      type: Object,
      default: {}
    }
  },
  watch:{
    institution:{
      handler(newData,preData){
        this.serverUnitTable=[]
        this.checkName=newData.checkName
        this.searchCheckUnitList1()
      },
    },
   created() {

   },
  mounted() {

  },
  },
  methods:{
     queryServerUnit:function (){

     },
    getRowKeys(row) {
      return row.id
    },
    companyOpen:function(row,expandedRows){
      if(expandedRows.length>0){//展开时执行
        this.expands=[]
        this.expands.push(row.id)
         this.tankInfoTable=[]
         for(let m=0;m<this.allData.length;m++){
           if(this.allData[m].f001==row.sydw){
             this.tankInfoTable.push(this.allData[m])
           }
         }
       }else {

       }

    },
    // 获取检验单位列表数据
    async searchCheckUnitList1() {
      this.CheckUnitListArgs.pageSize=146
      const res = await searchCheckUnitList(this.CheckUnitListArgs);
      const _list= res.data.data;
      this.allData=_list
      let _sydw=[]
      //去除公称容积中的空格和单位并组成单位表
      for(let i in _list){
        let prevalue=_list[i].f006
        if(prevalue.length<2){
          _list[i].f006="0m3"
        }else {
          _list[i].f006=_list[i].f006.replace(/\s+/g,"")
        }
        _list[i].f006=_list[i].f006.slice(0,_list[i].f006.length-2)
        if(_list[i].f027==this.checkName){
          _sydw.push(_list[i].f001)   //找到该检验机构下的所有用户单位
        }
      }
      //去除使用单位中的重复值
      var sydw=[]
      for(let i in _sydw){
        if(sydw.indexOf(_sydw[i])==-1){
          sydw.push(_sydw[i])
        }
      }
      console.log("sydw"+sydw.length)
      let list=[]
      let id=0
      for(let m=0 ;m<sydw.length;m++) {
        let tankCount = 0
        let lessThoundCumec = 0
        let thoundsCumec = 0
        let tenThoundsCumec = 0
        let hunThoundsCumec = 0
        for (let n=0;n<_list.length;n++) {//当数组是json数据时，不适以let in遍历
          if (sydw[m] == _list[n].f001) {
            tankCount += 1
            let dataValue = parseInt(_list[n].f006)
            if(dataValue < 1000){
                lessThoundCumec += 1;
            }
            else if (dataValue >= 1000 && dataValue < 10000){
                thoundsCumec += 1
            }
            else if (dataValue >= 10000 && dataValue < 100000) {
                tenThoundsCumec += 1
            }
            else if(dataValue >= 100000){
                hunThoundsCumec += 1
            }
          }
        }
        id+=1
        let list_ = {
            "id":id,
            "sydw":sydw[m],
            "tankCount":tankCount,
            "hunThoundsCumec":hunThoundsCumec,
            "thoundsCumec":thoundsCumec,
            "tenThoundsCumec":tenThoundsCumec,
            "lessThoundCumec":lessThoundCumec,
        }
        list.push(list_)
      }
      this.CheckUnitListTotal=list.length
      this.serverUnitTable=list
      let total=0
      for(let i in list){
        total=total+list[i].tankCount
      }
      this.checkUnitListTablePageSizeChange(10)
    },
    // 检验单位列表表格页面大小改变
    async checkUnitListTablePageSizeChange(pageSize) {
      this.CheckUnitListArgs.pageSize = pageSize
      if (this.tag==0){
        this._serverUnitTable=this.serverUnitTable
        this.tag=1
      }
      let thirdTable=[]
      if(pageSize<=this._serverUnitTable.length){
        for (let i=0;i<pageSize;i++){
          thirdTable.push(this._serverUnitTable[i])
        }
        this.serverUnitTable=thirdTable
      }else {
        this.serverUnitTable=this._serverUnitTable
      }
      this.$forceUpdate()
    },
    // 检验单位列表表格页码改变
    async checkUnitListTablePageChange(page) {
      this.CheckUnitListCurrentPage = page
      // this.searchData()
      console.log(this.CheckUnitListArgs.pageSize*(page-1),page*this.CheckUnitListArgs.pageSize -1)
      let thirdTable=[]
      if(page*this.CheckUnitListArgs.pageSize-1<this._serverUnitTable.length){
        for(let table_start=this.CheckUnitListArgs.pageSize*(page-1);table_start<=page*this.CheckUnitListArgs.pageSize -1;table_start++){
          thirdTable.push(this._serverUnitTable[table_start])
        }
        this.serverUnitTable=thirdTable
      }else {
        for(let table_start=this.CheckUnitListArgs.pageSize*(page-1);table_start<this._serverUnitTable.length;table_start++){
          thirdTable.push(this._serverUnitTable[table_start])
        }
        this.serverUnitTable=thirdTable
      }
      this.$forceUpdate()
    },
    //单元格背景颜色设设置：
    cellStyle:function ({row,column,rowIndex,columnIndex}){ //不会直接返回,一个个执行完
      if (columnIndex=='1'||columnIndex=='0'){
        return 'color:black;backgroundColor:#2F5597';
      }
       if (columnIndex=='2'){
          return 'color:red;backgroundColor:#2F5597';
       }
       if (columnIndex=='3'||columnIndex=='4'){
          return 'color:yellow;backgroundColor:#2F5597';
       }
       if (columnIndex=='5'){
        return 'color:black;backgroundColor:#2F5597';
       }
       if (columnIndex=='6'){
        return 'color:white;font-weight:bold;backgroundColor:#2F5597'
      }
       return 'backgroundColor:#2F5597;'
    }
  }
}
</script>

<style scoped>
   .allPage{
      width:100%;
      height: 100%;
   }
   div.page {
     width: 100%;
     display: flex;
     margin-top: 30px;
     flex-direction: row;
     justify-content: flex-end;
     position: relative;
     right: 36px;
   }

</style>
